<template>
	<view class="wrap">
		<view class="wrapTable">
			<view class="wrapTableItem">
				<view class="wrapTableItemBtn" @click="switchTab('0')">
					<view class="wrapTableItemBtnName">预约中</view>
					<view class="wrapTableItemBtnBorder" v-if="indexCode=='0'"></view>
				</view>
			</view>
			<view class="wrapTableItem">
				<view class="wrapTableItemBtn" @click="switchTab('1')">
					<view class="wrapTableItemBtnName">已完成</view>
					<view class="wrapTableItemBtnBorder" v-if="indexCode=='1'"></view>
				</view>
			</view>
			<view class="wrapTableItem">
				<view class="wrapTableItemBtn" @click="switchTab('2')">
					<view class="wrapTableItemBtnName">已确认</view>
					<view class="wrapTableItemBtnBorder" v-if="indexCode=='2'"></view>
				</view>
			</view>
		</view>
		<view class="wrapList">
			<view class="wrapListItem" v-for="(item,index) in data" :key="index" @click="jumpInfo(item)">
				<view class="wrapListItemTitle">{{item.username}}</view>
				<view class="wrapListItemContent">
					<view class="wrapListItemContentLi">
						<view class="wrapListItemContentLiKey">名称</view>
						<view class="wrapListItemContentLiValue">{{item.agendaName}}</view>
					</view>
					<view class="wrapListItemContentLi">
						<view class="wrapListItemContentLiKey">时间</view>
						<view class="wrapListItemContentLiValue">{{item.agendaDate}}</view>
					</view>
					<view class="wrapListItemContentLi">
						<view class="wrapListItemContentLiKey">网点</view>
						<view class="wrapListItemContentLiValue">{{item.branchName}}</view>
					</view>
					<view class="wrapListItemContentLi">
						<view class="wrapListItemContentLiKey">地址</view>
						<view class="wrapListItemContentLiValue">{{item.branchAddress}}</view>
					</view>
					<view class="wrapListItemContentLi">
						<view class="wrapListItemContentLiKey">电话</view>
						<view class="wrapListItemContentLiValue">{{item.branchContact}}</view>
					</view>
					<view class="wrapListItemContentLi" v-if="indexCode!='0'">
						<view class="wrapListItemContentLiKey">围度</view>
						<view class="wrapListItemContentLiValue">{{item.bodyInfo}}</view>
					</view>
					<view style="display: flex;justify-content: flex-end;width: 100%;" v-if="indexCode=='0'">
						<view class="wrapListItemContentBtn" @click="cancel(item.id)">取消预约</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from './config/api'
	import {
		sendReq
	} from '../../../components/canvasShow/config/mixin/sendReqMixin.js'
	export default {
		data() {
			return {
				indexCode: '0', //tab下标
				data: [], //数据集合
			}
		},
		onLoad() {
			this.getInfoList()
		},
		methods: {
			jumpInfo(item) {
				if (this.indexCode == '1') {
					uni.navigateTo({
						url: '/pages_category_page1/tabbar/measure/measureInfo?id=' + item.id
					})
				}
			},
			getInfoList() {
				var _this = this
				this.data = []
				var apiUrl = api.infoList + '?type=' + _this.indexCode
				let params = {
					url: apiUrl,
					method: 'GET'
				}
				sendReq.methods.sendReq(params, (res) => {
					if (JSON.stringify(res.data) !== '{}') {
						if (res.code == '200') {
							this.data = res.data
						}
					} else {}
				})
			},
			cancel(id) {
				var _this = this
				this.data = []
				var apiUrl = api.infoCancel + '?infoId=' + id
				let params = {
					url: apiUrl,
					method: 'GET'
				}
				sendReq.methods.sendReq(params, (res) => {
					uni.showToast({
						title: '取消成功！',
						icon: 'none',
						duration:2000,
					})
					this.getInfoList()
				})
			},
			switchTab(index) {
				this.indexCode = index
				this.getInfoList()
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.wrap {
		height: 100%;
		background-color: #F6F6F6;

		.wrapTable {
			width: 100%;
			display: flex;

			.wrapTableItem {
				width: 50%;
				height: 88upx;
				background-color: #fff;

				.wrapTableItemBtn {
					.wrapTableItemBtnName {
						text-align: center;
						margin-top: 24upx;
					}

					.wrapTableItemBtnBorder {
						width: 32upx;
						height: 4upx;
						background-color: #EFB257;
						margin: 24upx auto 0 auto;
					}
				}
			}
		}

		.wrapList {
			width: 690upx;
			height: 90%;
			overflow: auto;
			margin: 0 auto;

			.wrapListItem {
				width: 100%;
				background-color: #fff;
				border-radius: 16upx;
				margin-top: 24upx;

				.wrapListItemTitle {
					width: 100%;
					height: 92upx;
					border-bottom: 1px solid #DCDCDC;
					padding: 24upx;
					font-size: 32upx;
					color: #333;
					font-weight: bold;
				}

				.wrapListItemContent {
					width: 100%;
					min-height: 160upx;
					padding: 24upx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.wrapListItemContentLi {
						display: flex;
						margin-bottom: 24upx;

						.wrapListItemContentLiKey {
							width: 64upx;
							font-size: 32upx;
							color: #999;
							margin-right: 40upx;
						}

						.wrapListItemContentLiValue {
							width: 540upx;
							font-size: 32upx;
							color: #333;
						}
					}

					.wrapListItemContentBtn {
						height: 66upx;
						background-color: #EFB257;
						padding: 0 24upx;
						line-height: 66upx;
						border-radius: 30upx;
						color: #fff;
					}
				}
			}
		}
	}
</style>
